<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>base</title>
<!-- css -->
<link id="v_theme" href="../../src/css/theme/aristo/theme.css" rel="stylesheet" type="text/css" />
<link href="../../src/css/primeui-1.1-min.css" rel="stylesheet" type="text/css" />
<!--lib js  -->
<script type="text/javascript" src="../../src/lib/vue.js"></script>
<script type="text/javascript" src="../../src/lib/jquery.min.js"></script>
<!-- js加载器 -->
<script type="text/javascript" src="../../src/loader/loader.js"></script>
<script type="text/javascript" src="../js/theme.js"></script>
<script type="text/javascript" src="gridData.js"></script>

</head>
<body>

<div id="grid"></div>

<script type="text/javascript">

VUI
.dir('../../src/') // 设置JS存放根目录
.use('Grid',function(){
	grid = new VUI.Grid({
		renderId:'grid'
		,data : gridData
		,striped:true // 斑马线
		,columns : [ [
			{
				field : 'cityName',
				title : '城市'
			},
			{
				field : 'mobile',
				title : '手机号'
			},
			{
				field : 'address',
				title : '地址'
			},
			{
				field : 'createDate',
				title : '创建时间'
			}
			,{
				title : '操作'
				,formatter:function(val,obj,index,$td,$tr){
					var html = [
						'<a href="#" onclick="update('+index+')">修改</a>'
						,'<a href="#" class="btn-canel">废除</a>'
					];
					return html.join(' | ');
				}
			}
			] 
		]
	});
	
	// 方法1(推荐):
	// 好处是函数操作不会暴露在外部,方法2就是暴露在外部
	grid.on('ClickCell',function(e){
		var $target = $(e.target); // $target即<a>
		if($target.hasClass('btn-canel')) {
			var row = e.row;
			alert('废除:' + row.orderId)
		}
	});
	
});

// 方法2: 直接绑定到标签的onclick
function update(index) {
	var row = grid.getRowByIndex( index );
	alert('修改:'+row.mobile);
}
function del(index) {
	var row = grid.getRowByIndex( index );
	alert('删除:'+row.mobile);
}




</script>
</body>
</html>